<template>
  <div class="best-selling">
    <div class="ranking-nr">
      <!-- 排行顺序 -->
      <div
        class="rank-list-box"
        v-for="(items, index) in fictiontitle"
        :key="index"
      >
        <div class="rank-list">
          <div class="rank">
            <!-- <div>{{index}}</div> -->
            <div class="rank_color"  :style="{background:items.background}">{{ index + 1 }}</div>
          </div>
          <div class="ameee">
            <span class="rank-span">[{{ items.fictionType }}]</span
            ><router-link
              :to="'/noveldetail?id=' + items.id"
              >{{ items.titleName }}</router-link
            >
          </div>
        </div>
        <div class="line">
          <hr size="2" color="#efefef" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getFictionApi } from "../api/novelmain.js";
export default {
  data() {
    return {
      fictions: null,
      fictiontitle: [],
    };
  },
  methods: {
    getFictionFun() {
      getFictionApi({ id: this.$route.query.id }).then((data) => {
        let index = data.fiction.findIndex(
          (item) => item.nameId == this.$route.query.id
        );
        console.log("items", index);
        this.fictions = data.fiction[index];
        console.log("items", this.fictions);
      });
    },
  },
  created() {
    // console.log(this.$route.query);
    if ("id" in this.$route.query) {
      this.getFictionFun();
    }
  },
  mounted() {
    getFictionApi().then((data) => {
      // this.fiction = data.fiction;

      // 页面一加载的时候先出来三个对象的内容
      for (var j = 2; j < data.fiction.length; j++) {
        if (j < 6) {
          this.fictiontitle.push(data.fiction[j]);
        }
      }
    });
  },
};
</script>

<style lang="scss" scoped>
</style>